<template>
  <div class="login-register">
    <div class="contain">
      <div class="big-box" :class="{active:isLogin}">

        <div class="big-contain">
          <div class="btitle">管理员登录</div>
          <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="80px" :hide-required-asterisk="true">
            <el-form-item label="账号" prop="username">
              <el-input v-model="loginForm.username">
                <template #prefix>
                  <el-icon class="el-input__icon"><user /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="userpwd">
              <el-input type="password" v-model="loginForm.userpwd">
                <template #prefix>
                  <el-icon class="el-input__icon"><lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="check">
              <el-input type="text" clearable v-model.number="loginForm.check" placeholder="请输入验证码"></el-input>
              <div class="code" @click="refreshCode">
                <s-identify :identifyCode="identifyCode"></s-identify>
              </div>
            </el-form-item>
            <el-form-item class="btns">
              <el-button color="#5cb3cc" @click="login" style="color: white">立即登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="small-box">
        <div class="small-contain">
          <div class="stitle">你好，管理员!</div>
          <p class="scontent">开始登录，奔向更好</p>
          <!-- <button class="sbutton" @click="changeType">切换</button> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'admin_login',
  data() {
    return {
      identifyCodes: "1234567890",
      identifyCode: "",

      loginForm: {
        username: '',
        userpwd: '',
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          {required: true, message: '请输入登录名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        // 验证密码是否合法
        userpwd: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
          {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
        ],
        // 验证验证码是否合法
        check:[
          {required: true,message: '请输入验证码', trigger: 'blur'},
          {min:1000,max:9999,type: 'number', message: '请输入4位数字', trigger: 'blur'}
        ],
      }
    }
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4)
  },
  methods: {
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.Codes, 4)

    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
            this.randomNum(0, this.identifyCodes.length)
            ];
      }
      console.log(this.identifyCode);
    },

    //学院管理者以及组织管理者登录
    login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (valid) {
          axios.post('/admins/login', {
            name: this.loginForm.username,
            pwd: this.loginForm.userpwd,
            identifyCode: this.identifyCode,
            code: this.loginForm.check,
          }).then(res => {
            let r = res.data
            if (r.flag === true) {
              alert(r.msg)
              window.sessionStorage.setItem('token', r.token)
              this.$router.push('/adminHome')
            } else {
              alert(r.msg)
            }
          }).catch(err => {
            console.log(err)
          })
         }

      })
    },

  }
}
</script>

<style scoped="scoped">
.contain {
  width: 40%;
  height: 45%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 3px #f0f0f0,
  0 0 6px #f0f0f0;
}

.big-box {
  width: 70%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 30%;
  transform: translateX(0%);
  transition: all 1s;
}

.big-contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.btitle {

  font-size: 1.5em;
  font-weight: bold;
  color: #4762B0;
}

.small-box {
  width: 30%;
  height: 100%;
  background: #4762B0;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0%);
  transition: all 1s;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}


.small-contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stitle {
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
}

.scontent {
  font-size: 0.8em;
  color: #fff;
  text-align: center;
  padding: 2em 4em;
  line-height: 1.7em;
}

.big-box.active {
  left: 0;
  transition: all 0.5s;
}

.small-box.active {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transform: translateX(-100%);
  transition: all 1s;
}

.code {
  height: 32px;
  width: 117px;
}
</style>
